<template>
  <el-drawer @close="closeForm('')" size="500px" :title="mode==='add'?'添加成员':'编辑成员'" :visible.sync="visible" :wrapperClosable="false">
    <el-form :model="form" :rules="rules" label-width="100px" class="drawerForm" ref="drawerForm">
      <el-form-item label="账号名称:" prop="loginName">
        <el-input
            v-model="form.loginName"
            placeholder="请输入"
        ></el-input>
      </el-form-item>
      <el-form-item label="用户名:" prop="userName">
        <el-input
            v-model="form.userName"
            placeholder="请输入"
        ></el-input>
      </el-form-item>
      <el-form-item label="手机号:" prop="phone">
        <el-input
            v-model="form.phone"
            maxlength="11"
            placeholder="请输入"
        ></el-input>
      </el-form-item>
      <el-form-item label="部门:" prop="deptId">
        <el-cascader
            v-model="form.deptId"
            :options="treeData"
            :props="{ checkStrictly: true,label:'name',value:'id' }"
            clearable
            style="width: 100%"
        >
        </el-cascader>
      </el-form-item>
      <el-form-item label="角色:" prop="roleList">
        <el-select
            clearable
            multiple
            v-model="form.roleList"
            class="select1"
            placeholder="请选择"
            style="width: 100%"
        >
          <selectOptions
              :options="
                    () =>
                      $api
                        .api_urcap_auth_role_listAll({
                          param:{roleType:'角色'}
                        })
                        .then(res => {
                          return res.data
                        })
                  "
              :labelField="'roleName'"
              :valueField="'id'"
          >
          </selectOptions>
        </el-select>
      </el-form-item>
      <el-form-item label="职位:" prop="duty">
        <el-input
            v-model="form.duty"
            placeholder="请输入"
        ></el-input>
      </el-form-item>
    </el-form>
    <div class="drawer-footer">
      <el-button @click="handleSubmit" :loading="btnLoading" size="small" class="btn plain-btn">保存</el-button>
      <el-button @click="closeForm('')" size="small" class="btn default-btn">取消</el-button>
    </div>
  </el-drawer>
</template>

<script>
import {sandbox} from '@/libs/util'
import drawer from '@/mixins/drawer.js'
export default {
  mixins: [drawer],
  props:{
    visible: {
      type: Boolean,
      default: false,
    },
    mode: {
      type: String,
      default: '',
    },
    selectRow: {
      type: Object,
      default: ()=>{},
    },
  },
  data() {
    return {
      btnLoading:false,
      form: sandbox({
        enable: true,
        loginName: '',
        userName: '',
        phone: '',
        areaCode: '500000',
        password: '123456',
        deptId: '',
        duty: '',
        roleList: [],
      }),
      rules: {
        loginName: [{required: true, message: '必填项', trigger: 'blur'}],
        userName: [{required: true, message: '必填项', trigger: 'blur'}],
        phone: [{required: true, message: '必填项', trigger: 'blur'}],
        roleList: [{required: true, message: '必填项', trigger: 'trigger'}],
        deptId: [{required: true, message: '必填项', trigger: 'trigger'}],
      },
      treeData:[]
    }
  },
  methods: {
    SetData(row){
      console.log(row)
      this.$api.api_urcap_departmentManage_listDeptUser({
        param: {
          deptId: this.selectRow.id,
          userName: row.userName
        },
      }).then(res => {
        Object.assign(this.form, res.data[0])
      })
    },
    departmentMethods(){
      let form = sandbox(this.form)
      form.deptId = form.deptId.length ? form.deptId[form.deptId.length - 1] : form.deptId
      return this.$api.api_urcap_departmentManage_saveDeptUser({
        body: form,
        config: {showMsg: true}
      })
    },
    handleSubmit () {
      this.$refs.drawerForm.validate(valid => {
        if (valid) {
          this.btnLoading = true
          this.departmentMethods()
              .then(() => {
                this.closeForm('reload')
              })
              .finally(() => {
                this.btnLoading = false
              })
        }
      })
    },
    // 获取树列表
    getDepartTree() {
      this.$api
          .api_urcap_departmentManage_orgTree()
          .then((res) => {
            this.treeData = res.data.children;
          })
    },
  },
  watch:{
    visible(val){
      if(val){
        this.getDepartTree()
        if(this.selectRow.roleType){
          this.form.roleList = [this.selectRow.id]
        } else{
          this.form.deptId = this.selectRow.id
        }
      }
    },
  },
}
</script>

<style scoped lang="scss">

</style>
